<template>
  <div class="role">
    <page-search
      :search-config="searchConfig"
      @search-click="handleSearchClick"
      @reset-click="handleResetClick"
    />

    <page-content
      ref="pageContentRef"
      :content-config="contentConfig"
      @add-new-click="handleAddNewClick(relatedCb())"
    >
      <template #status="scope">
        <el-switch
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          v-model="scope.row[scope.prop]"
          :active-value="1"
          :inactive-value="0"
          :before-change="handleBeforeSwitchChange"
          @change="handleSwitchChange(scope.row)"
      /></template>
      <template #action="scope">
        <el-button
          class="action-btn"
          text
          type="primary"
          size="small"
          icon="Edit"
          @click="handleEditClick(scope.row, true)"
        >
          编辑
        </el-button>

        <el-popconfirm title="确定要删除吗？" @confirm="handleDeleteClick(scope.row)">
          <template #reference>
            <el-button class="action-btn" text type="danger" size="small" icon="Delete">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </page-content>

    <page-model
      :model-config="modelConfig"
      :page-name="contentConfig.pageName"
      ref="pageModelRef"
      @update-page-data="handleUpdatePageData"
      :model-other-data="modelOtherData"
    >
      <template #menuId>
        <el-tree
          ref="treeRef"
          style="width: 100%"
          node-key="id"
          :data="entireMenus"
          :props="{ label: 'name', children: 'children' }"
          show-checkbox
          @check="handleTreeCheck"
          :default-checked-keys="menuIds"
          :check-strictly="true"
        />
      </template>
    </page-model>
  </div>
</template>

<script setup lang="ts" name="role">
import PageSearch from '@/components/page-search/page-search.vue'
import searchConfig from './config/search.config'

import PageContent from '@/components/page-content/page-content.vue'
import contentConfig from './config/content.config'

import PageModel from '@/components/page-model/page-model.vue'
import modelConfig from './config/model.config'

import usePageContent from '@/hooks/usePageContent'
import usePageModel from '@/hooks/usePageModel'

import useSystemStore from '@/stores/main/system/system'
import useCommonStore from '@/stores/main/common/common'

import { ElTree } from 'element-plus'
import { ref, reactive, nextTick } from 'vue'

import { postEntireMenusApi } from '@/service/api'
import getMenuList from '@/utils/aysncMenu'

// - hooks
const {
  pageContentRef,
  handleResetClick,
  handleSearchClick,
  handleUpdatePageData,
  handleDeleteClick,
  handleSwitchClick
} = usePageContent()
const { pageModelRef, handleAddNewClick, handleEditClick } = usePageModel(editCallBack)

// - store
const systemStore = useSystemStore()
const commonStore = useCommonStore()

// - data
const treeRef = ref<InstanceType<typeof ElTree>>()
const entireMenus = ref<any>()
const modelOtherData = reactive({})
const handleTreeCheck = (checkedN, checkedK) => {
  nextTick(() => {
    modelOtherData['menuId'] = [...checkedK.checkedKeys, ...checkedK.halfCheckedKeys]
  })
}
let menuIds = ref<any>([])
// - computed
function editCallBack(payload) {
  menuIds.value = []
  nextTick(() => {
    systemStore.getDetailsById(contentConfig.pageName + '/get', payload.id).then((res) => {
      res.result.menuList.map((item: any) => {
        menuIds.value.push(item.id)
      })
      // treeRef.value?.setCheckedKeys(menuIds)
      commonStore.isShowModel = true
    })
  })
}

const relatedCb = () => {
  menuIds.value = []
}

// - methods
//启用、停止状态
const switchState = reactive({
  switchStatus: false // 用于解决el-switch初始化会执行change事件
})

const handleBeforeSwitchChange = () => {
  switchState.switchStatus = true
  return switchState.switchStatus
}

const handleSwitchChange = (item) => {
  if (switchState.switchStatus) {
    handleSwitchClick(item)
  }
}

const getMenu = async () => {
  let res = await postEntireMenusApi()
  entireMenus.value = getMenuList(res?.result)
}

getMenu()
</script>

<style scoped>
.role {
}
</style>
